@include b(collapse) {
  overflow: hidden;

  &-item {
    @include e(title) {
      position: relative;
      height: $collapse-height;
      line-height: $collapse-height;
      padding: 0 $collapse-padding;
      @include onepx(bottom);

      &:after {
        left: r(15);
      }
    }

    @include e(content) {
      position: relative;
      height: 0;
      overflow: hidden;
      @include onepx(bottom);

      &:after {
        left: r(15);
      }

      &-inner {
        padding: $padding-v-lg $collapse-padding;
      }

      @include m(anim) {
        transition: all 0.15s ease-out;
      }
    }

    @include e(arrow) {
      position: absolute;
      width: r(10);
      height: r(10);
      top: r(20);
      right: $collapse-padding;
      border-right: $collapse-arrow-border-width solid $collapse-arrow-color;
      border-bottom: $collapse-arrow-border-width solid $collapse-arrow-color;
      transform: rotate(45deg);
      transition: transform 0.15s ease-out;
      transform-origin: 50% 50%;

      @include m(hidden) {
        visibility: hidden;
      }
    }

    @include m(active) {
      @include e(content) {
        height: auto;
      }

      @include e(arrow) {
        transform: rotate(-135deg);
      }
    }

    @include m(disabled) {
      @include e(arrow) {
        border-right-color: $collapse-arrow-disabled-color;
        border-bottom-color: $collapse-arrow-disabled-color;
      }
    }

    @media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
      @include e(title, content) {
        @include onepx(bottom);

        &:after {
          left: r(15);
        }
      }
    }
  }
}
